<template>
  <el-container direction="horizontal" class="main-content">
    <el-aside class="home-slide-bar hidden-xs-only" :width="isCollapse ? '65px' : '226px'">
      <ul class="menu-main">
        <li v-for="(item, index) in menuList.values" :key="index" :class="[activeClass === item.id ? 'active' : '']" @click="clickMenu(item)">
          <a href="javascript:;">
            <!-- <i icon="item.icon" class="mr-10"></i> -->
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.menuName }}</span>
          </a>
        </li>
      </ul>
    </el-aside>
    <el-main>
      <el-row :gutter="20">
        <el-col class="mb-20" :span="4" :xs="12" v-for="(item, index) in itemList" :key="index">
          <div class="home-item" @click="itemClick(item)">
            <div class="home-icon">
              <i :class="item.icon || 'el-icon-discount'"></i>
            </div>
            <div class="home-text">
              <h4 class="home-title">{{ item.menuName }}</h4>
              <p class="home-tips">{{ item.menuName }}</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>

  </el-container>
</template>

<script setup lang="ts">
import https from "@/common/api";
import { onMounted, reactive } from "@vue/runtime-core";
const menuList = reactive([]);
const itemList = reactive([]);
function getList() {
  https.getMenu({}).then((res) => {
    menuList.values = res.data;
    console.log(res.data);
    console.log(menuList.values);
  });
}
onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.home-slide-bar {
  border-right: 1px solid #ebeef5;
  background: #e9f0f8;
  .menu-main {
    font-size: 14px;
    li {
      list-style: none;
      padding: 0 15px;
      border-left: 4px solid transparent;
      a {
        display: inline-block;
        padding: 16px 0px;
        text-decoration: none;
        color: #606266;
        span {
          vertical-align: middle;
        }
        i {
          font-size: 18px;
          vertical-align: middle;
        }
      }
      &:hover {
        border-left-color: #2787f5;
        background: #f7f8fa;
        a {
          color: #2787f5;
        }
      }
      &.active {
        border-left-color: #2787f5;
        background: #f7f8fa;
        a {
          color: #2787f5;
        }
      }
    }
  }
}
.home-item {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 300px;
  background: #fff;
  padding: 30px 0px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .home-icon {
    margin-top: 20px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    font-size: 56px;
    color: #fff;
    background: #6495ed;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home-text {
    flex: 1;
    text-align: center;
    .home-title {
      font-size: 16px;
      color: #606266;
      margin-top: 30px;
      line-height: 40px;
    }
    .home-tips {
      color: #909399;
      font-size: 14px;
    }
  }
}
</style>